<template>
  <div class="energy-use-view">
    <div class="header">
      <div class="header-left">
        <div>
          <el-radio-group size="large" v-model="radio2">
            <el-radio-button label="f" >分</el-radio-button>
            <el-radio-button label="r" >日</el-radio-button>
            <el-radio-button label="y" >月</el-radio-button>
          </el-radio-group>
        </div>
        <div>
          <el-date-picker
            size="large"
            value-format="YYYY-MM"
            v-model="store.state.totalCount.month"
            default-value="new Date()"
            type="month"
            placeholder="请选择时间"
          />
        </div>
      </div>
      <div class="header-right">
        <div>
          <el-select
              v-model="province"
              @change="customer = companyList[0]?.id"
              class="m-2"
              placeholder="选择城市"
              size="large"
          >
            <el-option
                v-for="item in $store.state.areaList"
                :key="item.name"
                :label="item.name"
                :value="item.id"
            />
          </el-select>
        </div>
        <div>
          <el-select v-model="customer" class="m-2" placeholder="选择公司" size="large">
            <el-option
              v-for="item in companyList"
              :key="item.title"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </div>
      </div>
      <div style="clear: both"></div>
    </div>
    <div>
      <div class="item">
        <frame-block title="">
          <div class="mrdl">
            <lineAndbarEcharts id="byqfzl" :key="captchaTime" :tableFrom="{ customer, province, timeValue, radio2 }" type="line" toolbox valueType="zdxl" />
          </div>
        </frame-block>
      </div>
      <div class="item">
        <div class="mrdl">
          <div class="table">
            <p class="table_header">
              <span>详细数据</span>
              <span>{{ store.state.ddidListTime.firstDateTime }}～{{ store.state.ddidListTime.lastDateTime }}</span>
            </p>
            <el-table :data="$store.state.ddidList" style="width: 100%" :row-class-name="tableRowClassName">
              <el-table-column prop="dateTime" label="日期" />
              <el-table-column prop="maxValue" label="最大量" />
              <el-table-column prop="maxTime" label="发生时间" />
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <br />
  </div>
</template>

<script setup>
import { ref, onMounted, computed, watch } from 'vue'
import { useStore } from 'vuex'
import axios from "axios";

const store = useStore()
store.state.pageName = "maximum"


const customer = ref(store.state.customer)
const province = ref(store.state.province)
const timeValue = ref(store.state.totalCount.month)
const radio2 = ref('r')

const captchaTime = ref(0)
const getLocalTime = () => {
  captchaTime.value = Date.now()
}

onMounted(() => {})

watch(
    () => store.state.province,
    () => {
      province.value = store.state.province
      customer.value = store.state.customer

      let customerObj = store.state.companyList.filter((e) => e.id == store.state.customer)[0]
      if (customerObj) {
        if (customerObj.provinceId) {
          province.value = customerObj.provinceId
        }
      }
    },
    { immediate: true }
)

watch(customer, () => {
  store.dispatch('setCustomer', customer.value)
})

watch([customer, province, () => store.state.totalCount.month, radio2,() => store.state.leftTreeId], (val) => {
  
  
  getLocalTime()

})

const companyList = computed(function () {
  if (province.value == 0) {
    return store.state.companyList
  } else if (province.value) {
    return store.state.companyList.filter((e) => e.provinceId == province.value)
  } else {
    return store.state.companyList
  }
})

</script>

<style lang="scss" scoped>
.table {
  width: 1558px;
  padding: 0 8px;
}
.table_header {
  display: flex;
  justify-content: space-between;

  font-size: 14px;
  color: #fcf8f8;
  padding: 10px 0;
}
.mrdl {
  width: 1540px;
  height: 500px;
}
.dfjg {
  width: 1020px;
}
.dljg {
  width: 500px;
  height: 460px;
}
.byyd {
  width: 500px;
  padding: 40px 40px 0 35px;
  & > div {
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    div:nth-child(2) {
      flex-grow: 1;
      height: 90px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      p {
        display: flex;
        justify-content: space-between;
      }
      img {
        width: 16px;
      }
    }
    & > img {
      width: 106px;
      margin-right: 10px;
      height: 98px;
    }
  }
}
.energy-use-view {
  padding-top: 25px;
  font-size: 18px;
  color: #fcf8f8;
  width: 100%;
  .item {
    display: inline-block;
  }
}
.header {
  padding: 0 22px 0 12px;
}
.header-right {
  float: right;
  display: flex;
  align-items: center;
  & > div {
    margin-left: 20px;
  }
}
.header-left {
  float: left;
  display: flex;
  align-items: center;
  & > div {
    margin-right: 20px;
  }
}

.item_header {
  padding: 10px;
}
</style>